<template>

  <div class="chat_bg" v-if="!loading">
    <div class="header">
      <div class="d-c-c h_l">
        <img v-img-url="baseInfo.shopLogo" class="img" />
        <div class="txt">{{ baseInfo.shopName }}-{{ serviceUserName }}</div>
        <div class="state-box">
          <div class="circle"></div>
          <div class="txt">在線</div>
        </div>
      </div>
      <div class="d-c-c" style="cursor: pointer" @click="logout">
        <div class="icon iconfont icon-tuichu"></div>
        <div class="ml4">退出</div>
      </div>
    </div>

    <div class="box d-s-s">
      <div class="box_l">
        <div class="title">用戶列表</div>
        <div class="search">
          <el-input
            size="small"
            v-model="nickName"
            placeholder="請輸入用戶暱稱"
            @input="changNickName"
          ></el-input>
        </div>

        <el-scrollbar height="450px">
          <template v-if="tableData.length > 0">
            <div class="user_list">
              <template v-for="(v, idx) in tableData" :key="idx">
                <div class="item" @click="checked(v)">
                  <span
                    class="close_chat icon iconfont icon-shanchu"
                    @click="closeChat(idx, v.userId)"
                  ></span>
                  <div class="d-a-c" style="height: 100%">
                    <view class="item_l">
                      <div class="avatar">
                        <img v-img-url="v.avatarUrl" class="img" />
                        <div class="circle" :class="{ active: true }"></div>
                      </div>
                    </view>
                    <view class="item_r">
                      <div class="d-b-c">
                        <div class="name">{{ v.nickName }}</div>
                        <div>{{ v.newMessage && v.newMessage.createTime }}</div>
                      </div>

                      <div class="notice">
                        <text
                          v-if="
                            v.newMessage != null && v.newMessage.msgType == 0
                          "
                        >
                          {{ v.newMessage.content }}
                        </text>
                        <text
                          v-if="
                            v.newMessage != null && v.newMessage.msgType == 1
                          "
                          >[圖片]</text
                        >
                        <text
                          v-if="
                            v.newMessage != null && v.newMessage.msgType == 2
                          "
                        >[商品]</text
                        >
                      </div>
                    </view>
                  </div>
                </div>
              </template>
            </div>
          </template>

          <div class="notable" v-else>暫無用戶諮詢</div>
        </el-scrollbar>
      </div>
      <div v-if="!is_open_socket" class="red danger_tip">當前未連接到服務器，請檢查網絡或者聯繫平臺是否已開啓在線客服</div>
      <div class="boxContent">
        <el-scrollbar class="box-scrollbar" @scroll="scrollContent">
          <ul class="infinite-list" ref="container">
            <template v-if="userId && content_list && content_list != ''">
              <li v-for="(item, index) in content_list" :key="index">
                <div
                  :class="item.sendType == 1 ? 'im_text' : 'im_text2'"
                  class="m-item"
                >
                  <img
                    class="avatar"
                    v-if="item.sendType == 2"
                    v-img-url="userInfo && userInfo.avatarUrl"
                  />
                  <img
                    class="avatar"
                    v-if="item.sendType == 1"
                    v-img-url="supplierLogo"
                  />
                  <div>
                    <div class="my_date">{{ item.createTime }}</div>
                    <div
                      v-if="item.msgType == 0"
                      :class="item.sendType == 1 ? 'my_content' : 'you_content'"
                    >
                      <div>{{ item.content }}</div>
                    </div>
                    <div
                      v-if="item.msgType == 1"
                      :class="item.sendType == 1 ? 'my_content' : 'you_content'"
                    >
                      <el-image
                        @click="clickImg(item.content)"
                        class="cont_img"
                        :src="item.content"
                        :preview-src-list="[item.content]"
                      />
                    </div>
                    <div
                      v-if="item.msgType == 2"
                      :class="item.sendType == 1 ? 'my_content' : 'you_content'"
                    >
                      <div class="product_txtitem">
                        <div>
                          <img
                            class="pro_img"
                            v-img-url="item.content.productImg"
                          />
                        </div>
                        <div>
                          <div class="pro_txtname">
                            {{ item.content.productName }}
                          </div>
                          <div class="pro_price">
                            ￥{{ item.content.productPrice }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      v-if="item.msgType == 3"
                      :class="item.sendType == 1 ? 'my_content' : 'you_content'"
                    >
                      <div class="product_txtitem">
                        <div>
                          <img
                            class="pro_img"
                            v-img-url="item.content.productImg"
                          />
                        </div>
                        <div>
                          <div class="pro_txtname">
                            {{ item.content.productName }}
                          </div>
                          <div class="pro_price">共計{{ item.content.orderNum }}件商品：合計￥{{
                              item.content.orderPrice
                            }}
                          </div>
                        </div>
                        <div>
                          <div class="f12 gray6">訂單號:{{ item.content.orderNo }}
                          </div>
                          <div class="f12 gray6">創建時間:{{ item.content.createTime }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </el-scrollbar>
        <div v-if="userId != 0">
          <div class="ww100">
            <span
              class="icon iconfont icon-tupian"
              @click="isupload = true"
            ></span>
          </div>

          <el-input
            class="chat_input"
            resize="none"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 2 }"
            placeholder="請輸入內容"
            v-model="content"
          >
          </el-input>
          <div class="pr btnbox">
            <button class="send_btn" @click="sendMessage">發消息</button>
          </div>
        </div>
      </div>
      <div class="box_r">
        <el-tabs v-model="activeName" @tab-change="handleClick">
          <el-tab-pane label="客戶信息" name="first"></el-tab-pane>
          <el-tab-pane label="交易訂單" name="second"></el-tab-pane>
        </el-tabs>
        <el-scrollbar height="480px">
          <div v-if="activeName == 'first'">
            <div>
              <h2 class="mb18">客戶信息</h2>
              <ul>
                <li>
                  <div class="item_top">客戶名稱</div>
                  <div v-if="userInfo && userInfo.nickName" class="item_btm">
                    {{ userInfo.nickName }}
                  </div>
                  <div v-else class="item_btm">-</div>
                </li>
                <li>
                  <div class="item_top">聯繫方式</div>
                  <div v-if="userInfo && userInfo.mobile" class="item_btm">
                    {{ userInfo.mobile }}
                  </div>
                  <div v-else class="item_btm">-</div>
                </li>
                <li>
                  <div class="item_top">客戶地址</div>
                  <div v-if="userInfo && userInfo.city" class="item_btm">
                    {{ userInfo.province }}省{{ userInfo.city }}市</div>
                  <div v-else class="item_btm">-</div>
                </li>
                <li>
                  <div class="item_top">客戶性別</div>
                  <div
                    v-if="
                      userInfo && (userInfo.gender == 0 || userInfo.gender == 1)
                    "
                    class="item_btm"
                  >
                    {{userInfo.gender ? "男" : "女"}}
                  </div>
                  <div v-else class="item_btm">-</div>
                </li>
              </ul>
            </div>
          </div>
          <div v-if="activeName == 'second'">
            <div class="order_list">
              <div
                class="order_item"
                v-for="(item, index) in orderList"
                :key="index"
              >
                <div class="order_item_top d-b-c mb8">
                  <div class="item_status blue">
                    {{ item.deliveryStatusText }}
                  </div>
                  <div>{{ item.createTime }}</div>
                </div>
                <div class="mb8">
                  <div
                    class="d-s-s"
                    v-for="(proitem, proindex) in item.productList"
                    :key="proindex"
                  >
                    <div>
                      <img
                        class="order_img"
                        v-img-url="proitem.imagePath"
                        alt=""
                      />
                    </div>
                    <div class="ml4">
                      <div>{{ proitem.productName }}</div>
                      <div v-if="proitem.isUserGrade == 1">
                        ￥{{ proitem.gradeProductPrice }}X{{ proitem.totalNum }}
                      </div>
                      <div v-else>
                        ￥{{ proitem.productPrice }}X{{ proitem.totalNum }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div>訂單編號:{{ item.orderNo }}</div>
                  <div>付款時間:{{ item.payTime }}</div>
                  <div>實收款:￥{{ item.payPrice }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :config="{
        total: 999,
      }"
      @returnImgs="returnImgsFunc"
    ></Upload>
  </div>
</template>

<script>
import ServiceApi from "@/api/service.js";
import Upload from "@/components/file/Upload.vue";
import auditSrc from "@/assets/notice.mp3";
import { useUserStore } from "@/store";
const {
  userInfo,
  afterLogout,
  socketUrl
} = useUserStore();
export default {
  data() {
    return {
      baseInfo: userInfo,
      loading: false,
      path: socketUrl,
      socketTask: null,
      usersocketList: "",
      nickName: "",
      // 确保websocket是打开状态
      is_open_socket: false,
      content: "",
      /*列表数据*/
      tableData: [],
      pageSize: 20,
      /* 联系人页数*/
      curPage: 1,
      /* 聊天记录页数*/
      repage: 1,
      userId: 0,
      appId: 0,
      serviceUserId: 0,
      conversation: "會話",
      content_list: [],
      /* 聊天滚动条高度*/
      scrollHeight: 0,
      nomore: false,
      isupload: false,
      /*当前图片类别*/
      type: null,
      file_path: "",
      logo_file_path: "",
      user_logo_file_path: "",
      intervalId: null,
      centerDialogVisible: false,
      chooseimg: "",
      userInfo: {},
      activeName: "second",
      orderList: [],
      is_destory: false,
      serviceUserName: "",
      chatLoding: false
    };
  },
  components: {
    Upload
  },
  watch: {},
  mounted() {
    console.log(this.path);
    // 初始化
    this.init();
    this.getTableList();
    const container = this.$refs.container;
    //这里的定时是为了列表首次渲染后获取scrollHeight并滑动到底部。
    setTimeout(() => {
      this.scrollHeight = container.scrollHeight;
    }, 800);
    container.addEventListener("scroll", e => {
      //这里的2秒钟定时是为了避免滑动频繁，节流
      setTimeout(() => {
        //滑到顶部时触发下次数据加载
        if (e.target.scrollTop == 0 && !this.nomore) {
          //将scrollTop置为10以便下次滑到顶部
          e.target.scrollTop = 10;
          //加载数据
          this.initData();
          //这里的定时是为了在列表渲染之后才使用scrollTo。
          this.$nextTick(() => {
            let scrollH = this.$refs.container.scrollHeight - this.scrollHeight;
            e.target.scrollTo(0, scrollH + 30); //-30是为了露出最新加载的一行数据
          });
        }
      }, 2000);
    });
  },
  unmounted() {
    // 销毁监听
    this.closeSocket();
  },
  methods: {
    scrollContent(e) {
      if (e.scrollTop < 1) {
        this.initData();
      }
    },
    async logout() {
      await afterLogout();
      this.$router.push("/login");
    },
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的瀏覽器不支持socket");
      } else {
        let json = this.baseInfo;
        this.serviceUserId = json && json.serviceUserId;
        this.appId = json && json.appId;
      }
    },
    open: function () {
      let self = this;
      console.log("socket连接成功", self.socketTask);
      self.is_open_socket = true;
      // 开始发送心跳
      self.startHeart();
      // 注：只有连接正常打开中 ，才能正常收到消息
      self.socketTask.onmessage = self.getMessage;
    },
    startHeart() {
      let self = this;
      let data = JSON.stringify({
        type: "ping",
        to: self.userId,
        from: self.serviceUserId,
        sendType: 1
      });
      self.intervalId = setInterval(function () {
        console.log("发送心跳", self.userId);
        self.send(data);
      }, 10000);
    },
    /*socket关闭*/
    onclose() {
      let self = this;
      if (self.is_destory) {
        return;
      }
      console.log("已经被关闭了");
      //重连机制
      self.socketTask = null;
      self.is_open_socket = false;
      clearInterval(self.intervalId);
      self.init();
      self.conectWebsolket();
    },
    error: function () {
      console.log("连接错误");
    },
    closeSocket: function () {
      console.log("连接关闭");
      let self = this;
      self.is_destory = true;
      if (!self.socketTask || self.socketTask == null) {
        return;
      }
      let data = JSON.stringify({
        type: "close",
        from_id: self.my_id,
        to: self.user_id
      });
      self.send(data);
      self.socketTask.close();
      self.socketTask = null;
      self.is_open_socket = false;
      clearInterval(self.intervalId);
    },
    getMessage: function (msg) {
      let newdata = JSON.parse(msg.data);
      console.log(newdata);
      if (!newdata.content && !newdata.contentJson) {
        return false;
      }
      if (newdata.contentJson) {
        newdata.content = newdata.contentJson;
      }
      /* 接收到非状态消息 */
      // 播放声音
      this.relist();
      // let audio = new Audio();
      // audio.src = "./static/imgs/notice.mp3";
      // audio.src = auditSrc;
      // audio.play();
      // console.log("播放声音");
      /* 收到当前用户的消息*/
      console.log("------------------" + this.userId);
      if (newdata.userId == this.userId) {
        let item = {
          content: newdata.content,
          from: newdata.userId,
          msgType: newdata.msgType,
          sendType: 2,
          createTime: this.formatDate(),
          avatarUrl: this.userInfo.avatarUrl
        };
        this.content_list = [...this.content_list, item];
        this.$nextTick(() => {
          this.$refs.container.scrollTop = this.$refs.container.scrollHeight;
        });
      }
      if (this.tableData.length >= 1) {
        let flag = false;
        let n = 0;
        this.tableData.forEach((olditem, index) => {
          if (olditem.userId == newdata.userId) {
            flag = true;
            n = index;
          }
        });
        if (flag) {
          this.tableData[n].newMessage.content = newdata.content;
          this.tableData[n].newMessage.msgType = newdata.msgType;
          this.tableData[n].newMessage.createTime = this.formatDate();
          this.relist();
        } else {
          if (newdata.userId) {
            ServiceApi.getinfo({
              userId: newdata.userId
            }, true).then(res => {
              this.tableData.unshift({
                avatarUrl: res.data.userInfo.avatarUrl,
                nickName: res.data.userInfo.nickName,
                userId: res.data.userInfo.userId,
                newMessage: {
                  content: newdata.content,
                  createTime: newdata.createTime,
                  msgType: newdata.msgType
                }
              });
            });
          }
        }
      } else {
        ServiceApi.getinfo({
          userId: newdata.userId
        }, true).then(res => {
          this.tableData.unshift({
            avatarUrl: res.data.userInfo.avatarUrl,
            nickName: res.data.userInfo.nickName,
            userId: res.data.userInfo.userId,
            newMessage: {
              content: newdata.content,
              createTime: newdata.createTime,
              msgType: newdata.msgType
            }
          });
        });
      }
      console.log("收到消息");
    },
    async changNickName() {
      this.getTableList("searchUser");
    },
    newData() {
      let self = this;
      let Params = {};
      Params.userId = self.userId;
      Params.page = self.repage;
      ServiceApi.recordlist(Params, true).then(data => {
        self.loading = false;
        let list = data.data.list.data;
        self.content_list = [...self.content_list, list[0]];
      }).catch(error => {
        console.log(error);
        self.loading = false;
      });
    },
    send(data) {
      let self = this;
      // 未连接
      if (!self.is_open_socket) {
        return;
      }
      self.socketTask.send(data);
    },
    handleClick(tab) {
      self.activeName = tab;
    },
    sendMessage() {
      let self = this;
      if (self.content == "") {
        return false;
      }
      // 未连接
      if (!self.is_open_socket) {
        return;
      }
      let data = JSON.stringify({
        sendType: 1,
        to: self.userId,
        from: self.serviceUserId,
        msgType: 0,
        type: "msg",
        content: self.content
      });
      let newdata = JSON.parse(data);
      let item = {
        sendType: 1,
        content: newdata.content,
        msgType: 0,
        type: "msg",
        createTime: self.formatDate()
      };
      self.content_list = [...self.content_list, item];
      self.socketTask.send(data);
      self.content = "";
      self.$nextTick(() => {
        self.relist();
        self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
      });
    },
    /*获取列表*/
    getTableList(type) {
      let self = this;
      let Params = {};
      Params.limit = 100;
      Params.nickName = self.nickName;
      if (type != "searchUser") {
        self.loading = true;
      }
      ServiceApi.servicelist(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.userList;
        if (self.tableData == "") {
          self.content_list = [];
          self.userInfo = null;
          self.orderList = [];
          self.userId = 0;
        }
        if (type != "searchUser") {
          if (self.tableData.length > 0) {
            self.checked(self.tableData[0]);
          } else {
            this.getUserinfo();
            console.log("**************");
            this.conectWebsolket();
          }
        }
      });
    },
    initData() {
      this.repage++;
      this.getRecordlist();
    },
    getRecordlist() {
      let self = this;
      let Params = {};
      Params.userId = self.userId;
      Params.pageIndex = self.repage;
      Params.pageSize = 15;
      self.chatLoding = true;
      ServiceApi.recordlist(Params, true).then(res => {
        self.loading = false;
        self.chatLoding = false;
        for (let i = 0; i < res.data.records.length; i++) {
          if (res.data.records[i].contentJson) {
            res.data.records[i].content = res.data.records[i].contentJson;
          }
        }
        let list = res.data.records.reverse();
        self.content_list = [...list, ...self.content_list];
        if (res.data.lastPage <= self.repage) {
          self.nomore = true;
        }
        this.scrollHeight = this.$refs.container.scrollHeight;
        if (self.repage == 1) {
          self.$nextTick(() => {
            self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
          });
        }
      }).catch(error => {
        console.log(error);
        self.loading = false;
        self.chatLoding = false;
      });
    },
    checked(item) {
      if (this.chatLoding) {
        return;
      }
      this.userId = item.userId;
      this.conversation = item.nickName;
      this.user_logo_file_path = item.avatarUrl;
      this.content_list = [];
      this.userInfo = {};
      this.repage = 1;
      this.nomore = false;
      this.getRecordlist();
      this.getUserinfo();
      if (this.socketTask == null) {
        this.conectWebsolket();
      }
      // this.queryUserState();
    },
    conectWebsolket() {
      console.log(this.path);
      let url = this.path + "/socket?userId=" + this.serviceUserId + "&usertype=service";
      // 实例化socket
      this.socketTask = new WebSocket(url);
      // 监听socket连接
      this.socketTask.onopen = this.open;
      // 监听socket关闭
      this.socketTask.onclose = this.onclose;
      // 监听socket错误信息
      this.socketTask.onerror = this.error;
    },
    // 查询用户在线状态
    queryUserState() {
      this.usersocketList = [];
      this.tableData.forEach(v => {
        let url = this.path + "/socket?userId=" + v.userId + "&usertype=user";
        this.socketTask = new WebSocket(url);
        // 监听socket连接
        this.socketTask.onopen = this.open;
        // 监听socket关闭
        this.socketTask.onclose = this.onclose;
        // 监听socket错误信息
        this.socketTask.onerror = this.error;
      });
    },
    DateToHM(string) {
      let myDate = new Date();
      let newsDate = new Date(string);
      if (string) {
        if (myDate.toLocaleDateString() == newsDate.toLocaleDateString()) {
          var f = string.split(" ", 2);
          var t = (f[1] ? f[1] : "").split(":", 3);
          var hm = t[0] + ":" + t[1];
          return hm;
        } else {
          return newsDate.toLocaleDateString();
        }
      } else {
        return "";
      }
    },
    /*关闭选择图片*/
    returnImgsFunc(e) {
      let self = this;
      console.log(e, "接收到的图片");
      if (e != null && e.length > 0) {
        e.forEach(v => {
          let data = JSON.stringify({
            sendType: 1,
            to: self.userId,
            from: self.serviceUserId,
            msgType: 1,
            type: "msg",
            content: v.filePath
          });
          let newdata = JSON.parse(data);
          let item = {
            sendType: 1,
            content: newdata.content,
            msgType: 1,
            type: "msg",
            createTime: self.formatDate()
          };
          this.content_list = [...this.content_list, item];
          self.socketTask.send(data);
          self.$nextTick(() => {
            self.$refs.container.scrollTop = self.$refs.container.scrollHeight;
          });
        });
      }
      self.isupload = false;
    },
    clickImg(path) {
      this.centerDialogVisible = true;
      this.chooseimg = path;
    },
    closeChat(i, uId) {
      let self = this;
      // const isLastItem = this.tableData.length === 1;
      this.tableData.splice(i, 1);
      // if (isLastItem) {
      //   window.location.reload();
      // }
      ServiceApi.remove({
        // relationId: relationId,
        userId: self.userId || uId,
        serviceUserId: self.serviceUserId
      }, true).then(res => {
        self.getTableList("searchUser");
      });
    },
    relist() {
      let self = this;
      self.$nextTick(() => {
        self.$refs.scroll.setScrollTop(self.$refs.container.scrollHeight);
      });
      let Params = {};
      Params.limit = 100;
      Params.nickName = "";
      ServiceApi.servicelist(Params, true).then(res => {
        self.tableData = res.data.list.data;
      });
    },
    formatDate(time) {
      let date = new Date();
      if (time) {
        date = new Date(time);
      }
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      return `${year}/${month}/${day} ${hour}:${minute}`;
    },
    getUserinfo() {
      let self = this;
      ServiceApi.getinfo({
        userId: this.userId
      }, true).then(res => {
        self.serviceUserName = res.data.name;
        self.userInfo = res.data.userInfo;
        self.orderList = res.data.orderList;
        self.supplierLogo = res.data.logo;
      });
    },
    dateConversion(str) {
      let date = "";
      date = new Date(Date.parse(str.replace(/-/g, "/")));
      date = date.getTime();
      return date;
    },
    /*选择上传图片*/
    fileChange(e) {
      console.log(e);
    },
    /*选择图片之前*/
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
      const isLt1M = file.size / 1024 / 1024 < 2;
      if (!isIMAGE) {
        ElMessage.error("上傳文件只能是圖片格式!");
      }
      if (!isLt1M) {
        ElMessage.error("上傳文件大小不能超過 2MB!");
      }
      return isIMAGE && isLt1M;
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  background: #409eff;
  border-radius: 11px 11px 0px 0px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;

  .state-box {
    width: 72px;
    height: 27px;
    line-height: 27px;
    border-radius: 20px;
    background: #ffffff;
    margin-left: 6px;
    color: #666666;
    font-size: 14px;
    text-align: center;
    position: relative;

    .circle {
      width: 8px;
      height: 8px;
      background: #22ac38;
      border-radius: 50%;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .h_l {
    height: 100%;
  }

  .img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .txt {
    margin-left: 6px;
  }
}

.box {
  background: #ffffff;

  .title {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    position: relative;
    padding-left: 12px;
    margin-top: 12px;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      width: 4px;
      height: 14px;
      background: #409eff;
      top: 4px;
    }
  }

  .box_l,
  .box_r {
    width: 300px;
    padding: 0 10px;
    height: calc(100vh - 96px);
  }

  .box_l {
    .search {
      border-bottom: 1px solid #eee;
      padding: 12px 0;
    }

    .user_list {
      .item {
        height: 70px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        position: relative;
      }

      .item_r {
        flex: 1;
      }

      .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 4px;
        position: relative;

        // overflow: hidden;
        .circle {
          width: 8px;
          height: 8px;
          background: #999999;
          position: absolute;
          right: 0;
          bottom: 1px;
          border-radius: 50%;

          &.active {
            background: #22ac38;
          }
        }

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .name {
        font-size: 12px;
        font-weight: bold;
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .close_chat {
        position: absolute;
        right: 0;
        top: 68%;
        transform: translateY(-50%);
      }

      .notice {
        width: 220px;
        margin-top: 4px;
        color: #999999;
        /* 设置宽度原因：让文本宽度超过200px时换行显示 */
        /* 不同浏览器有不同的前缀，比如-moz-box */
        display: -webkit-box;
        /* 子元素的排列方式：垂直排列 */
        -webkit-box-orient: vertical;
        /* 设置3行文本之后打点显示 */
        -webkit-line-clamp: 2;
        /* 超出盒子部分隐藏显示 */
        overflow: hidden;
      }
    }
  }

  .boxContent {
    padding: 0 10px;
    flex: 1;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    height: calc(100vh - 96px);
  }

  .box_r {
  }
}

.mb8 {
  margin-bottom: 8px;
}

.left {
  background-color: #f0f0f0;
}

.right {
  margin-left: 30px;
  background-color: rgba(242, 242, 242, 0.5);
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  margin: 5px;
}

.left_item {
  padding: 8px 15px;
  border-bottom: 1px solid #cccccc;
  background: #f0f0f0;
}

.left_item_active {
  padding: 8px 15px;
  border-bottom: 1px solid #cccccc;
  background: #ffffff;
}

.left_item_img {
  width: 40px;
  height: 40px;
}

.left_item_name {
  font-size: 14px;
  margin-left: 10px;
}

.left_item_content {
  color: rgb(153, 153, 153);
  font-size: 12px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.im_text {
  /* width: 100%; */
  display: flex;
  margin-top: 30px;
  flex-direction: row-reverse;
  position: relative;
}

.im_text2 {
  /* width: 100%; */
  display: flex;
  margin-top: 30px;
  position: relative;
}

.im_text .avatar {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  border-radius: 10px;
  background: none;
  align-items: flex-start;
}

.im_text2 .avatar {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  border-radius: 10px;
  background: none;
  align-items: flex-start;
}

.you_content,
.my_content {
  background-color: #ffffff;
  margin-top: 15px;
}

.im_text .my_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.im_text2 .my_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.im_text .you_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.im_text2 .you_content {
  max-width: 450px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-all;
}

.infinite-list {
  height: 400px;
  padding: 15px;
}

.el-main {
  padding: 0;
}

.chat_header {
  border-bottom: 1px solid #cacaca;
  margin-bottom: 10px;
  line-height: 60px;
  background-color: #ffffff;
}

.content_title {
  font-size: 16px;
}

.my_content {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
}

.you_content {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
}

.pro_img {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  background-color: #ffffff;
}

.pro_txtname {
  max-width: 100px;
  font-size: 14px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pro_price {
  font-size: 12px;
  color: #e2231a;
}

.chat_input {
  border: none;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: normal;
  color: #000000;
  text-align: left;
  border-width: 0px;
  outline: none;
  margin-bottom: 10px;
  width: 95%;
}

.chat_input textarea {
  outline: none;
  border: none;
}

.send_btn {
  border-width: 0px;
  width: 78px;
  height: 32px;
  line-height: 32px;
  background: inherit;
  background-color: rgba(0, 110, 255, 0.898039215686275);
  border: none;
  border-radius: 2px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  position: absolute;
  outline: none;
  right: 7px;
  top: 5px;
  border-radius: 8px;
}

.btnbox {
  height: 50px;
  background-color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.cont_img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.chat_bg {
  // background: rgba(242, 242, 242, 0.5);
  background: #ffffff;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.el_aside {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  margin: 5px;
}

.icon-tupian:hover {
  color: #1296db;
}

.notable {
  text-align: center;
  background: #ffffff;
  padding: 30px;
  font-size: 17px;
}

.my_date {
  color: #cccccc;
  font-size: 12px;
  position: absolute;
  top: -10px;
}

.im_text .my_date {
  right: 45px;
}

.user_info {
  box-shadow: 0px 0px 5px rgba(204, 204, 204, 1);
  margin: 5px;
  background-color: #ffffff;
  padding: 30px;
  max-height: calc(100vh - 128px);
}

.item_top {
  color: #cccccc;
  margin-bottom: 8px;
}

.item_btm {
  font-size: 13px;
  color: #333333;
  margin-bottom: 18px;
}

.order_img {
  width: 50px;
  height: 50px;
}

.order_item_top {
  background-color: #f3f3f3;
  padding: 5px 16px;
  border-radius: 6px;
  margin-top: 18px;
}

.danger_tip {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
}

.avatar-uploader .icon-tupian.icon.iconfont {
  font-size: 22px;
  margin-left: 10px;
}

.left .icon-shanchu.icon.iconfont {
  cursor: pointer;
  color: #999999;
  font-size: 14px;
  margin-left: 5px;
}
.box-scrollbar {
  height: calc(100vh - 134px - 96px);
}
.left-scroll {
  height: calc(100vh - 90px - 96px);
}
.right-scroll {
  height: calc(100vh - 54px - 96px);
}
</style>

